<template>
  <div class="home-container">
    <!-- 头部导航 -->
    <van-nav-bar class="page-nav-bar" fixed>
      <template #title>
        <van-button
          class="search-btn"
          round
          type="info"
          size="small"
          icon="search"
          to="/search"
        >搜索
        </van-button>
      </template>
    </van-nav-bar>

    <!-- 频道列表 -->
    <van-tabs class="channel-tabs" v-model="active" animated swipe-threshold="3">
      <van-tab
        v-for="channel in userChannels"
        :key="channel.id"
        :title="channel.name"
      >
        <article-list :channelId="active"></article-list>
      </van-tab>

      <template #nav-right>
        <div class="placeholder"></div>
        <div class="hamburger-btn" @click="isChannelEditShow = true">
          <svg-icon icon-class="jiezhi" width="30px" height="40px" class="icon"/>
        </div>
      </template>
    </van-tabs>

    <!-- 弹框的代码区域一般都写在template模板的最下面 -->
    <van-popup
      v-model="isChannelEditShow"
      position="bottom"
      closeable
      close-icon-position="top-left"
      class="channel-edit-popup"
      :style="{ height: '100%' }"
    >
      <channel-edit
        :myChannels="userChannels"
        :allChannels="allChannels"
        :active="active"
        @update-active="updateActiveFn"
      ></channel-edit>
    </van-popup>
  </div>
</template>

<script>

import { getAllChannelsAPI, getUserChannelsAPI } from '@/api'
import ArticleList from './components/article-list.vue'
import ChannelEdit from './components/channel-edit.vue'
import { getItem } from '@/utils/storage'

export default {
  name: 'HomeIndex',
  components: {
    ArticleList,
    ChannelEdit
  },
  data () {
    return {
      active: 0,
      userChannels: [],
      allChannels: [],
      isChannelEditShow: false
    }
  },

  created () {
    // 获取频道列表
    this.loadUserChannels()
    // 获取全部频道列表
    this.loadAllChannels()
  },

  methods: {
    // 获取用户频道列表
    async loadUserChannels () {
      try {
        if (!getItem('BS_MYCHANNELS')) {
          // 登录 或 本地没有存储数据时，需要调用接口
          const { data: res } = await getUserChannelsAPI()
          console.log(res)
          this.userChannels = res.list
        } else {
          this.userChannels = getItem('BS_MYCHANNELS')
        }
      } catch (error) {
        console.log(error)
      }
    },

    // 获取全部频道列表
    async loadAllChannels () {
      try {
        const { data: res } = await getAllChannelsAPI()
        console.log(res)
        this.allChannels = res.channelsList
      } catch (error) {
        console.log(error)
      }
    },

    // 更新选中频道
    updateActiveFn (index, flag = false) {
      // 当flag为true 时，不用关闭弹框
      // 切换频道
      this.active = index
      // 关闭弹框
      if (!flag) {
        this.isChannelEditShow = false
      }
    }
  }
}
</script>

<style scoped lang="less">
.home-container {
  padding-top: 16vh;
  padding-bottom: 50px;

  ::v-deep .van-nav-bar__content {
    height: 10vh;
  }

  :deep(.van-nav-bar__title) {
    max-width: unset;

    .search-btn {
      background-color: #b39cd0;
      border: none;
      height: 40px;
      width: 300px;
    }
  }

  :deep(.channel-tabs) {
    .van-tabs__wrap {
      width: 100%;
      z-index: 2;
      position: fixed;
      top: 10vh;
      border: 0;
    }

    .van-tab {
      width: 100px;
    }

    .van-tabs__line {
      background-color: #967adc;
      height: 4px;
      width: 16px;
    }

    .placeholder {
      flex-shrink: 0; /* 让当前元素不参与flex布局计算 */
      width: 32px;
      height: 44px;
    }

    .hamburger-btn {
      z-index: 2;
      position: fixed;
      right: 1px;
      background-color: #ffffff;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  .channel-edit-popup {
    padding-top: 50px;
    box-sizing: border-box;
  }
}
</style>
